<div id="show_user_box">

	<table class="flexme">

	</table>
	<script type="text/javascript">
		function test() {
			$('#add_new_user').show();
		}


		$('.flexme').flexigrid({
			dataType : "json",
			colModel : [{
				display : 'id',
				name : 'iso',
				width : 40,
				sortable : true,
				align : 'center'
			}, {
				display : 'username',
				name : 'name',
				width : 180,
				sortable : true,
				align : 'left'
			}, {
				display : 'password',
				name : 'printable_name',
				width : 120,
				sortable : true,
				align : 'left'
			}],

			sortname : "id",
			buttons : [{
				name : 'Add',
				bclass : 'add',
				onpress : showAddModal
			}, {
				name : 'Delete',
				bclass : 'delete',
				onpress : test
			}, {
				name : 'Edit',
				bclass : 'edit',
				onpress : test
			}, {
				separator : true
			}],
			sortorder : "asc",
			usepager : true,
			title : 'Users',
			useRp : true,
			rp : 15,
			width : 700,
			height : 200
		});
		reloadUser();
		function reloadUser() {
			$.ajax({
				url : "/api/users/get/all/",
				type : 'POST',
				data : {
					csrfmiddlewaretoken : '{{ csrf_token }}' // just the token value
				},
				success : function(response) {
					$('.flexme').flexAddData(formatGetUsers(eval(response)));
					$('.flexme').flexReload();
				}
			});
		}
		
		function formatGetUsers(response) {

			var rows = Array();

			for ( i = 0; i < response.length; i++) {
				rows.push({
					cell : [response[i].id, response[i].username, response[i].password]
				});
			}

			return {
				total : response.length,
				page : 1,
				rows : rows
			};

		}

		function addUser() {
			$.ajax({
				url : "/api/users/add/",
				type : 'POST',
				data : {
					csrfmiddlewaretoken : '{{ csrf_token }}',
					username : $('#id_username').val(),
					password : $('#id_password').val(),
					card_number : $('#id_card_number').val(),
					privilage : $('#id_privilage').val()
				},
				success : function(response) {
					alert(response);
				}
			})
		}
		function showAddModal () {
			$('#add_user_modal').modal('show');
		}
	</script>
	<div id="add_new_user" style="display: none;">
		<form>
			<input id="username"  type="text" />
			<input id="password" type="text" />
			<input id="card_number" type="text" />
			<input id="privilage" type="text" />
			<input type="button"  onclick="addUser()"/>
		</form>
	</div>

	<div id="add_user_modal" class="modal hide fade">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
				&times;
			</button>
			<h3>Add User</h3>
		</div>
		<div class="modal-body">
			{{ form.as_p }}
		</div>
		<div class="modal-footer">
			<a onclick="$('#add_user_modal').modal('hide');" class="btn">Anuluj</a>
			<button class="btn btn-primary" onclick="addUser()">Dodaj</button>
		</div>

	</div>

</div>